<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
</style>
<template>
  <div class="category">
    <!-- 按钮 -->
    <div class="btns">
        <el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
      <el-button size="small" type="primary" @click="toAdd">添加</el-button>
      <el-row>
          <hr>
           <div class="block">
    <span class="demonstration" type="info"></span>
    <el-carousel height="150px">
      <el-carousel-item v-for="item in 5" :key="item">
        <h3 class="small" align="center">{{ item="栏目内容" }}</h3>
        
      </el-carousel-item>
    </el-carousel>
  </div>
</el-row>
<hr>
    </div>
    <!-- 表格 -->
   
    <el-table :data="list" style="width: 100%" size="small">
     <el-table-column prop="id" label="栏目序号" >
     </el-table-column>
     <el-table-column prop="name" label="栏目名称"> 
    </el-table-column>
    <el-table-column prop="introduce" label="栏目介绍"> 
    </el-table-column>
    <el-table-column prop="nu" label="栏目数量">
    </el-table-column>
        <el-table-column prop="parentId" label="父ID"> 
        </el-table-column>
        <el-table-column  label="操作" width="150" align="center"> 
                <template v-slot="scope">
                    <el-button size="small" type="danger" @click="del(scope.row)">删除</el-button>
                     <el-button size="small" type="primary" @click="edit(scope.row)">修改</el-button>
                </template>
        </el-table-column>
    </el-table>
    <!-- 模态框 -->
    <el-dialog
    class="customer_modal"
      title="添加Category模块"
      :visible.sync="dialogVisible"
      width="60%">
      {{form}}
    <el-form :model="form" label-width="100px">
        <el-form-item label="栏目名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
         <el-form-item label="栏目介绍">
          <el-input v-model="form.introduce"></el-input>
        </el-form-item>
        <el-form-item label="栏目数量">
          <el-input v-model="form.nu"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
      <el-button type="primary" @click="save" size="small">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {get,post} from '@/utils/request'
export default {
  data (){

    return {
        form:{},
      list:[],
      dialogVisible:false
    }
  },
  created(){
this.loadData();
  },
  methods:{
      save()
      {
let url="/cms_category/save"
get(url,this.form).then((response)=>{
 
        this.dialogVisible = false;
      
        this.$message({type:"success",message:response.message})
       
        this.loadData();
}
)
      },

      del(row){
let url="/cms_category/delete"
post(url,{id:row.id}).then((response)=>{
    this.$message({type:"success",message:response.message})
    this.loadData();
})
      },
      edit(row){
this.form=row;
this.dialogVisible=true;
      },
      loadData(){
          let url="/cms_category/findAll";
          get(url).then((response)=>{
              this.list=response.data;});
      },
    toAdd(){
      this.dialogVisible = true;
    }
  }
}

</script>